<template>
  <tabbar>
    <tabbar-item selected link="/home">
      <span slot="label">效果图</span>
      <i slot="icon">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-pic"></use>
        </svg>
      </i>
      <i slot="icon-active">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-pic-filling"></use>
        </svg>
      </i>
    </tabbar-item>
    <tabbar-item link="/home">
      <span slot="label">预约</span>
      <i slot="icon">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-icon04"></use>
        </svg>
      </i>
      <i slot="icon-active">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-icon04"></use>
        </svg>
      </i>
    </tabbar-item>
    <tabbar-item link="/mine">
      <span slot="label">我的</span>
      <i slot="icon">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-account"></use>
        </svg>
      </i>
      <i slot="icon-active">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-accountfilling"></use>
        </svg>
      </i>
    </tabbar-item>
  </tabbar>
</template>


<script>
  import {Tabbar,TabbarItem} from 'vux'

  export default {
    components: {
      Tabbar,
      TabbarItem
    }
  }
</script>
<style lang="less" scoped>

</style>
<style>
  .weui-tabbar{
    background-color: #FFFFFF !important;
  }
  .weui-tabbar__label{
    font-size: 15px !important;
  }
</style>
